<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>vue3-小懒猫</title>
	<meta name="keywords" content="关键字,关键字"/>
	<meta name="description" content="描述信息">
	<style>
		*{margin:0;padding:0;}
		#app{margin: 30px;}
		table{width: 100%;border-collapse: collapse;margin-bottom: 30px;}
		td{border:1px solid #ccc;padding:10px;}
		.titleMain{
			text-align: center;
			font-size: 18px;
			font-weight: bold;
		}
		.manuser{
			font-size: 18px;
			font-weight: bold;
		}
		.womenuser{
			font-size: 18px;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="titleMain">{{title}}</div>
		<table>
		    <thead>
		        <tr>
		            <td>ID</td>
		            <td>名字</td>
		            <td>年龄</td>
		            <td>性别</td>
		        </tr>
		    </thead>
		    <tbody>
		        <tr v-for="(user,index) in usersList" :key="user.id">
		            <td>{{user.id}}</td>
		            <td>{{user.name}}</td>
		            <td>{{user.age}}</td>
		            <td>{{user.male}}</td>
		        </tr>
		    </tbody>
		</table>
		<div class="manuser">男的用户</div>
		<table>
		    <thead>
		        <tr>
		            <td>ID</td>
		            <td>名字</td>
		            <td>年龄</td>
		            <td>性别</td>
		        </tr>
		    </thead>
		    <tbody>
		        <tr v-for="(user,index) in manUser" :key="user.id">
		            <td>{{user.id}}</td>
		            <td>{{user.name}}</td>
		            <td>{{user.age}}</td>
		            <td>{{user.male}}</td>
		        </tr>
		    </tbody>
		</table>
		<div class="womenuser">女的用户</div>
		<table>
		    <thead>
		        <tr>
		            <td>ID</td>
		            <td>名字</td>
		            <td>年龄</td>
		            <td>性别</td>
		        </tr>
		    </thead>
		    <tbody>
		        <tr v-for="(user,index) in womenUser" :key="user.id">
		            <td>{{user.id}}</td>
		            <td>{{user.name}}</td>
		            <td>{{user.age}}</td>
		            <td>{{user.male}}</td>
		        </tr>
		    </tbody>
		</table>
	</div>
	<script src="js/vue-min.js"></script>
	<script setup>
		const app = Vue.createApp({
			data() {
				return {
					title : "用户列表",
					usersList : []
				}
			},
			methods : {
				loadData(){
					this.usersList = [
						{id:1,name:"Mickey",age:23,male:1},
						{id:2,name:"喵猫",age:30,male:0},
						{id:3,name:"Dasic",age:20,male:1},
						{id:4,name:"捡球",age:25,male:0},
						{id:5,name:"KIKI",age:18,male:1}
					];
				}
			},
			created() {
				this.loadData();
			},
			computed : {
				manUser(){
					return this.usersList.filter(user=>user.male==0);
				},
				womenUser(){
					return this.usersList.filter(user=>user.male==1);
				}
			}
		
		});
		app.mount("#app");
	</script>
</body>
</html>
